<template>
  <!-- 职务管理 -->
  <el-dialog
    :title="$t('m.DUTY_MANAGEMENT')"
    custom-class="acd-dialog"
    :close-on-click-modal="false"
    :modal="false"
    :visible.sync="dutyDialog"
    :before-close="handleClose"
  >
    <el-table
      :data="tableData"
      ref="table"
      height="400"
      style="width: 100%"
      :highlight-current-row="true"
      cell-class-name="table-cell-custom"
      header-cell-class-name="table-herder-custom"
      size="small"
    >
      <el-table-column width="55" type="selection" align="center"></el-table-column>
      <el-table-column prop="dutyName" show-overflow-tooltip :label="$t('m.DUTY')" align="center"></el-table-column>
      <el-table-column prop="remark" :label="$t('m.REMARKS')" align="center"></el-table-column>
      <el-table-column align="center">
        <template slot-scope="scope">
          <img
            style="cursor: pointer;width:22px"
            src="../../assets/images/Edit_Hover.png"
            @click="handleModify(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleAdd" size="small">{{$t('m.ADD')}}</el-button>
      <el-button @click="handleDel" size="small">{{$t('m.DELECT')}}</el-button>
    </div>
    <!-- 新增/修改界面 -->
    <el-dialog
      :title="$t('m.DUTY_MANAGEMENT')"
      custom-class="inner-dialog"
      :close-on-click-modal="false"
      :modal="false"
      :visible.sync="dialogAdd"
      :before-close="handleAddClose"
      width="100%"
    >
      <svg-icon class="back-to-list" icon-class="back" @click="dialogAdd = false"></svg-icon>
      <div style="height:300px">
        <el-scrollbar wrap-style="overflow-x:hidden;height:200px" style="height:100%;">
          <el-form ref="edit-form" :model="form" label-width="120px" hide-required-asterisk>
            <el-form-item :label="$t('m.DUTY_NAME')">
              <el-input v-model="form.dutyName" size="small"></el-input>
            </el-form-item>
            <el-form-item :label="$t('m.REMARKS')">
              <el-input v-model="form.remark" type="textarea" :rows="2" size="small"></el-input>
            </el-form-item>
          </el-form>
        </el-scrollbar>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="dialogStatus === 'add'?handleCreate():handleUpdate()"
          size="small"
        >{{$t('m.CONFIRM')}}</el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import { getDuty, makeCall } from '@/api/data'
export default {
  props: {
    dutyDialog: Boolean,
  },
  components: {},
  data() {
    return {
      dialogAdd: false,
      form: {},
      tableData: [],
      dialogStatus: 'add',
    }
  },
  computed: {},
  methods: {
    init() {
      this.handleGetDuty()
    },
    //关闭
    handleClose() {
      this.$emit('update:dutyDialog', false)
    },
    //获取职务列表
    handleGetDuty() {
      let _this = this
      getDuty().then((res) => {
        _this.tableData = res.data.eventdata
      })
    },
    //编辑
    handleModify(item) {
      this.form = { ...item }
      this.dialogAdd = true
      this.dialogStatus = 'update'
    },
    //打开新增
    handleAdd() {
      this.dialogAdd = true
      this.form = {}
      this.dialogStatus = 'add'
    },
    handleAddClose() {
      this.dialogAdd = false
    },
    //新增
    handleCreate() {
      let _this = this
      let obj = {
        request: {
          '@id': '100000',
          '@type': 'DutyAdd',
          dutyName: this.form.dutyName,
          remark: this.form.remark,
        },
      }
      makeCall(obj).then((res) => {
        if (res.status == 200) {
          _this.dialogAdd = false
          setTimeout(() => {
            _this.init()
          }, 1500)
        }
      })
    },
    //修改
    handleUpdate() {
      let _this = this
      let obj = {
        request: {
          '@id': '100000',
          '@type': 'DutyMod',
          dutyID: this.form.dutyID,
          dutyName: this.form.dutyName,
          remark: this.form.remark,
        },
      }
      makeCall(obj).then((res) => {
        if (res.status == 200) {
          _this.dialogAdd = false
          setTimeout(() => {
            _this.init()
          }, 1500)
        }
      })
    },
    //删除
    handleDel() {
      let _this = this
      let delArr = this.$refs.table.store.states.selection
      if (delArr.length == 0) {
        this.$message.warning(this.$t('m.tip.DEL_EMPTY_TIP'))
        return
      }
      this.$confirm(this.$t('m.tip.DELECT_TIP'), this.$t('m.tip.TIPS'), {
        confirmButtonText: this.$t('m.CONFIRM'),
        cancelButtonText: this.$t('m.CANCEL'),
        type: 'warning',
      }).then(() => {
        delArr.forEach((element) => {
          let obj = {
            request: {
              '@id': '100000',
              '@type': 'DutyDel',
              dutyID: element.dutyID,
            },
          }
          makeCall(obj).then((res) => {
            if (res.status == 200) {
              _this.dialogAdd = false
              setTimeout(() => {
                _this.init()
              }, 1500)
            }
          })
        })
      })
    },
  },
  mounted() {
    this.init()
  },
}
</script>

<style lang="scss" scoped>
/deep/.acd-dialog {
  cursor: default;
  background-color: #1a4969;
  .el-dialog__header {
    padding-top: 10px;
    text-align: center;
    .el-dialog__title {
      color: #fff;
    }
    .el-dialog__close {
      color: #fff;
    }
  }
  .el-dialog__body {
    padding: 0 15px;
    .search-input {
      margin-bottom: 10px;
      .el-input__inner {
        background-color: #1a4969;
        color: #fff;
        width: 50%;
      }
    }
  }
  .el-dialog__footer {
    padding-bottom: 10px;
    .el-button {
      background-color: #1a4969;
      color: #fff;
      width: 70px;
    }
    .el-button:hover {
      background-color: #00b2ee;
    }
  }
  .el-table {
    td {
      border-bottom: 1px solid #2e67a8;
    }
    tr:hover > td {
      background-color: #2f6b8d;
    }
    background-color: #1a4969;
    .table-herder-custom {
      background-color: #2e67a8;
      color: #fff;
    }
    .table-cell-custom {
      background-color: #172a47;
      color: #fff;
      .el-link {
        color: #fff;
        margin-left: 20px;
        span {
          font-size: 10px;
        }
        &:hover {
          color: #06f7bb;
        }
      }
    }
    /deep/.el-table__body tr.current-row > td {
      background: #6bb5e6 !important;
    }
  }
  .el-dialog__wrapper {
    position: absolute;
    height: 100%;
    .inner-dialog {
      background-color: #1a4969;
      height: 100%;
      margin-top: 0 !important;
      margin-bottom: 0px;
      opacity: 0.96;
      .el-dialog__footer {
        position: absolute;
        bottom: 0px;
        right: 0px;
      }
      .back-to-list {
        color: #fff;
        height: 22px;
        width: 22px;
      }
      .el-form {
        .el-form-item__label {
          color: #fff;
        }
        .el-input__inner,
        .el-textarea__inner {
          background-color: #1a4969;
          color: #fff;
          width: 40%;
        }
        .group-item {
          display: flex;
          flex-wrap: nowrap;
          align-items: center;
          .svg-icon {
            width: 19px;
            height: 19px;
            margin-right: 5px;
            cursor: pointer;
          }
          .add-label {
            color: #fff;
            cursor: pointer;
          }
          .el-input__inner {
            width: 240px;
          }
          &.add {
            margin-left: -1px;
            font-size: 13px;
            label {
              margin-left: 3px;
            }
            .valid-rule {
              color: #f56c6c;
              margin-left: 20px;
              font-size: 12px;
            }
          }
          .set-defaultNo {
            margin-left: 10px;
            font-style: oblique;
            .el-radio__label {
              font-size: 10px;
            }
          }
        }
      }
      .el-upload {
        .el-button {
          color: #fff;
          background-color: #1a4969;
          margin-top: 10px;
          &:hover {
            background-color: #00b2ee;
          }
        }
      }
    }

    .trial-box {
      position: absolute;
      left: calc(50% - 100px);
      top: calc(50% - 50px);
      border: 1px solid rgba(255, 255, 255, 0.6);
      border-radius: 5px;
      width: 200px;
      height: 100px;
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: center;
      .el-row {
        color: #fff;
      }
      .trial-loading {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        -webkit-animation: loading 1.1s infinite linear;
        animation: loading 1.2s infinite linear;
        @-webkit-keyframes loading {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }
        @keyframes loading {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }
      }
      .el-button {
        width: 70px;
        color: #fff;
        background-color: #1a4969;
        margin-top: 10px;
        &:hover {
          background-color: #00b2ee;
        }
      }
      .form-item-group {
        margin: 5px 0;
        .svg-button {
          height: 32px;
          display: flex;
          align-items: center;
          margin-bottom: 18px;
        }
      }
    }
  }
  .default-select-tree {
    right: 30px;
    position: absolute;
    bottom: 15%;
    height: 400px;
    width: 220px;
    background-color: #155175;
    border: 1px solid #fff;
    border-radius: 7px;
    z-index: 999999;
    .tree-scrollbar {
      border-radius: 7px;
      width: 100%;
      height: calc(100% - 40px);
      // background-color: #172a47;
      background-color: #155175;

      .el-tree {
        background-color: #155175 !important;
        color: #fff;
        /deep/.el-tree-node__content {
          height: 34px;
          cursor: default;
          background-color: #155175;
          &:hover {
            background-color: #616d70;
          }
        }
        /deep/.el-tree-node.is-current > .el-tree-node__content {
          background-color: #00b2ee !important;
          color: #ffffff;
        }
        .el-checkbox__input.is-checked {
          .el-checkbox__inner {
            background-color: green;
            border-color: green;
          }
        }
      }
    }
    /deep/.tree-scrollbar__wrap {
      width: auto;
      overflow-x: hidden;
      margin-right: -20px !important;
    }
    text-align: center;
    .el-button {
      width: 70px;
      background-color: #1a4969;
      color: #ffffff;
      &:hover {
        background-color: #409eff;
      }
    }
  }
}
</style>